<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>收款人列表</title>
  <link rel="stylesheet" href="../static/framework/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../static/framework/reset.css">
  <link rel="stylesheet" href="../static/css/footer.css">
  <link rel="stylesheet" href="../static/css/editRecipient.css">
  <link href="../static/layui-v2.9.1/layui/css/layui.css" rel="stylesheet">
  <script src="../static/layui-v2.9.1/layui/layui.js"></script>
  <link rel="stylesheet" href="../static/bootstrap-5.3.0-dist/css/bootstrap.min.css">
  <script src="../static/bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="../static/css/recipientList.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    #myForm {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f9f9f9;
    }

    #myForm h2 {
      font-size: 20px;
      margin-bottom: 15px;
      text-align: center;
    }

    #addRecipientForm {
      text-align: center;
    }

    #addRecipientForm input[type="text"],
    #addRecipientForm button {
      display: block;
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      font-size: 16px;
      box-sizing: border-box;
    }

    #submitFormBtn {
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }

    #submitFormBtn:hover {
      background-color: #45a049;
    }

    .recipientList {
      list-style-type: none;
      padding: 0;
    }

    .recipientList li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      padding: 20px;
      border-radius: 10px;
      transition: background-color 0.3s ease;
      /* 添加过渡效果 */
    }

    .recipientList li:hover {
      background-color: #f0f0f0;
      /* 鼠标悬停时的背景色 */
    }


    .recipient h3 {
      margin: 0;
      font-size: 18px;
      color: #333;
    }

    .recipient p {
      margin: 5px 0 0;
      color: #666;
    }

    .fa-angle-right {
      cursor: pointer;
      color: #007bff;
    }

    .fa-angle-right:hover {
      color: #0056b3;
    }
  </style>
</head>

<body>
<div class="wrapper">
  <header>
    <i class="fa fa-angle-left fa-2x" onclick="location.href='/index'" style="font-size: 20px">首页</i>
    <p style="margin: auto;">转账</p>
    <p class="addPeople" style="cursor: pointer;margin-top:20px;" lay-on="test-page">新增</p>
  </header>


  <ul class="recipientList">
    <li class="recipient" th:each="recipient : ${session.recipients}">
      <div>
        <h3 th:text="${recipient.cardId}">623***803</h3>
        <p th:text="${recipient.recName}">李四</p>
      </div>
      <i class="fa fa-angle-right fa-2x" onclick="location.href='/editRecipient'" style="font-size: 100%;">修改</i>
    </li>

  </ul>

  <footer class="footer">
    <div>
      <button type="button" class="layui-btn">
        <i class="layui-icon layui-icon-left"></i>
      </button>
      <button type="button" class="layui-btn">
        <i class="layui-icon layui-icon-right"></i>
      </button>
    </div>
  </footer>
</div>
<script>
  const back = document.querySelector('button:first-child')
  const forword = back.nextElementSibling
  back.addEventListener('click', function () {
    //history.back()
    history.go(-1)
  })

  forword.addEventListener('click', function () {
    //history.forward()
    history.go(1)
  })


  // 假设这里是 layui 的事件绑定方式，确保 layui 已经正确引入和初始化
  layui.util.on('lay-on', {
    'test-page': function () {
      // 弹出一个 layui 的 layer 弹窗
      layer.open({
        type: 1,
        area: ['350px', 'auto'],
        content: `
        <div id="myForm">
          <h2>添加新收款人</h2>
          <form id="addRecipientForm" action="/recipient/addRecipient" method="post">
            <input type="text" name="cardId" placeholder="账户">
            <input type="text" name="recName" placeholder="姓名">
            <button type="submit" id="submitFormBtn">添加</button>
          </form>
        </div>
      `
      });

      // 监听表单提交按钮点击事件
      $('#submitFormBtn').on('click', function () {
        // 获取表单数据
        var account = $('input[name="account"]').val();
        var name = $('input[name="name"]').val();

        // 可以在这里进行数据验证
        if (account && name) {
          // 创建新的收款人信息元素
          var newRecipient = `
          <li>
            <div class="recipient">
              <h3>${account}</h3>
              <p>${name}</p>
            </div>
            <i class="fa fa-angle-right fa-2x edit-icon" style="font-size: 100%;" data-account="${account}" data-name="${name}">修改</i>
          </li>`;

          // 添加到收款人列表中
          $('.recipientList').append(newRecipient);

          // 关闭弹窗
          layer.closeAll();
        } else {
          layer.msg('请填写完整信息');
        }
      });
    }
  });


  document.querySelector('.recipientList').addEventListener('click', function (e) {
    if (e.target.localName === 'li') {
      const h3 = e.target.querySelector('h3').textContent;
      const p = e.target.querySelector('p').textContent;

      // 注意去掉URL参数名和赋值之间的空格
      location.href = `/transferAssure?account=${encodeURIComponent(h3)}&name=${encodeURIComponent(p)}`;
    }
  });

</script>
</body>

</html>


